<template>
    <div class="btn-mask">
        <!-- <div class="btn-mask-buy">
            <button @click="showbtnMask()">添加到购物袋</button>
            
        </div> -->
        <div style="display: none" id="btnMakId">
            <div class="btn-mask-box">
                <div class="btn-mask-body">
                    <div class="btn-mask-body-title">
                        提示
                        <span @click="disbtnMask">X</span>
                    </div>
                    <div class="btn-mask-body-contente">
                        <p><b>您还没有登录!</b></p>
                        <button @click="goLogin">去登录</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        //关掉自己
        disbtnMask() {
            let e = document.getElementById("btnMakId");
            e.style.display = "none";
            // console.log("关掉自己");
        },
        // 打开自己
        showbtnMask() {
            let e = document.getElementById("btnMakId");
            e.style.display = "block";
            // console.log("打开自己");
        },
        //去登陆页面
        goLogin() {
            this.disbtnMask();
            this.$router.push("/login");
        },
    },
};
</script>

<style lang="less" scoped>
.btn-mask{
opacity: 1 !important;
}
.btn-mask-box {
    
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn-mask-body {
        width: 350px;
        height: 250px;
        opacity: 1;
        color: #1d1d1f;
        border: 1px solid gray;
        background-color: #f5f5f7;
        border-radius: 20px;
        overflow: hidden;
        .btn-mask-body-title {
            background-color: rgba(00, 150, 255, 1);
            color: white;
            text-align: center;
            font-size: 20px;
            height: 40px;
            line-height: 40px;
            position: relative;
            span {
                position: absolute;
                top: 5px;
                right: 10px;
                background-color: rgba(255, 255, 255, 0.4);
                width: 30px;
                height: 30px;
                line-height: 30px;
                border-radius: 5px;
                cursor: pointer;
                user-select: none;
            }
        }
        .btn-mask-body-contente {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            height: 210px;
            p {
                font-size: 25px;
            }
            button {
                padding: 5px 10px;
                margin-bottom: 20px;
                border: 0;
                background-color: #007aff;
                color: white;
                border-radius: 5px;
                height: 30px;
                width: 150px;
                font-size: 15px;
                cursor: pointer;
            }
        }
    }
}
</style>